<template>
  <el-card>
    <div class="topSearchBox">
      <div class="searchBox">
        <el-date-picker
          v-model="params.add_time"
          type="date"
          placeholder="选择日期时间"
          align="right"
          :picker-options="pickerOptions"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
          @change="getRegisterList"
        >
        </el-date-picker>
      </div>
      <div class="searchBox">
        <el-input
          placeholder="请输入关键词"
          v-model="params.keywords"
          class="input-with-select"
          :clearable="true"
        >
          <el-button
            @click="getRegisterList"
            slot="append"
            icon="el-icon-search"
          ></el-button
        ></el-input>
      </div>
    </div>
    <!-- 表格区域 -->
    <el-table :data="registerList" stripe style="width: 100%">
      <el-table-column type="index" label="#" width="80"> </el-table-column>
      <el-table-column prop="materials__modules__name" label="材料名称">
      </el-table-column>
      <el-table-column prop="materials__modules__unit" label="材料单位">
      </el-table-column>
      <el-table-column prop="change_num" label="入库数量"> </el-table-column>
      <el-table-column prop="change_price" label="入库价格"> </el-table-column>
      <el-table-column prop="add_time" label="入库时间">
        <template slot-scope="scope">
          {{ scope.row.add_time.split("T")[0] }}
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="params.page"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="params.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </el-card>
</template>

<script>
import { getRegister } from "@/api/store";
export default {
  data() {
    return {
      searchVal: "", // 搜索内容
      registerList: [], // 历史记录列表
      total: 0, // 总数
      // 查询请求数据
      params: {
        page: 1,
        pagesize: 10,
        keywords: "",
        add_time: "",
        project_id:this.$route.query.project_id
      },
      timeVal: "",
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
    };
  },
  methods: {
    // 获取历史记录信息列表
    async getRegisterList() {
      console.log(this.$route);

      const res = await getRegister(this.params);
      if (res.code == 200) {
        this.registerList = res.data.data;
        this.total = res.data.total;
      }
      console.log(res);
    },
    // 页码数量发生变化时触发
    handleSizeChange(val) {
      this.params.pagesize = val;
      this.getRegisterList();
    },
    // 页码发生变化时触发
    handleCurrentChange(val) {
      this.params.page = val;
      this.getRegisterList();
    },
    // 搜索事件
    searchList() {
      this.getRegisterList();
      this.params.add_time = "";
      this.params.keywords = "";
    },
  },

  created() {},
  watch: {
    params: {
      handler(newVal) {
        if (!newVal.add_time & !newVal.keywords) {
          this.params.add_time = "";
          this.params.keywords = "";
          this.getRegisterList();
        }
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {
    this.getRegisterList();
  },
  beforeMount() {},
};
</script>
<style lang='less' scoped>
.topSearchBox {
  display: flex;
  padding-bottom: 20px;
  .searchBox {
    margin-right: 20px;
  }
}
.el-pagination {
  float: right;
  margin: 20px 0;
}
</style>